﻿@page "/AutoComplete/Data-Binding"

@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Data

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the different data binding supports of the AutoComplete. Type a character(s) in the AutoComplete element and the remaining characters will be automatically filled based on the first matched item.</p>
</SampleDescription>
<ActionDescription>
   <p>The AutoComplete loads the data either from local data sources or remote data services through the <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteModel.html' target='_blank'> DataSource</a> property. It supports the data type of <code>array</code> or <code>DataManager</code>.</p>
   <p>The DataManager, that act as an interface between service endpoint and AutoComplete, will require the follwoing minimal information to interact with the service endpoint properly.</p>
   <ul>
       <li><a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url' target='_blank'>DataManager->Url</a> - Defines the service endpoint to fetch data.</li>
       <li><a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor' target='_blank'>DataManager->Adaptor</a> - Defines the adaptor option. By default, <code>ODataAdaptor</code> is used for remote binding.</li>
   </ul>
    <p>The adaptor is responsible for processing response and request from/to the service endpoint. <code>Syncfusion.Blazor.Data</code> package provides some predefined adaptors that are designed to interact with particular service endpoints. They are:</p>
    <ul><li><code>UrlAdaptor</code> - Use this to interact any remote services.</li>
        <li><code>ODataAdaptor</code> - Use this to interact with OData endpoints.</li>
        <li><code>ODataV4Adaptor</code> - Use this to interact with OData V4 endpoints.</li>
        <li><code>WebApiAdaptor</code> - Use this to interact with Web API created under OData standards.</li>
        <li><code>WebMethodAdaptor</code> - Use this to interact with web methods.</li>
    </ul>
    <p>In this sample, the local data is bound to a collection of sports data and the remote data is bound to a collection of customer data as an instance of <code>DataManager</code>.</p>
    <p> More information on the data binding feature configuration can be found in the <a href='https://blazor.syncfusion.com/documentation/autocomplete/data-binding/' target='_blank'> documentation section</a>.</p>
</ActionDescription>

<div class="control-section col-lg-12">
    <div id="local-data" class="col-lg-6">
        <div class="content">
            <h4>Local Data</h4>
            <SfAutoComplete TValue="string" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country" Autofill=true>
                <AutoCompleteFieldSettings Value="Name"></AutoCompleteFieldSettings>
            </SfAutoComplete>
        </div>
    </div>
    <div id="remote-data" class="col-lg-6">
        <div class="content">
            <h4>Remote Data</h4>
            <SfAutoComplete TValue="string" TItem="OrderDetails" Placeholder="Select a name" Query="@RemoteDataQuery" Autofill="true">
                <SfDataManager Url="https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders" CrossDomain="true" Adaptor="Syncfusion.Blazor.Adaptors.ODataAdaptor"></SfDataManager>
                <AutoCompleteFieldSettings Text="CustomerID" Value="CustomerID"></AutoCompleteFieldSettings>
            </SfAutoComplete>
        </div>
    </div>
</div>

<style>
    #local-data, #remote-data {
        max-width: 270px;
        margin: 25px 60px;
        padding-top: 15px;
    }
</style>

@code{
    public class Countries
    {
        public string Name { get; set; }

        public string Code { get; set; }
    }

    public List<Countries> Country = new List<Countries>
{
        new Countries() { Name = "Australia", Code = "AU" },
        new Countries() { Name = "Bermuda", Code = "BM" },
        new Countries() { Name = "Canada", Code = "CA" },
        new Countries() { Name = "Cameroon", Code = "CM" },
        new Countries() { Name = "Denmark", Code = "DK" },
        new Countries() { Name = "France", Code = "FR" },
        new Countries() { Name = "Finland", Code = "FI" },
        new Countries() { Name = "Germany", Code = "DE" },
        new Countries() { Name = "Greenland", Code = "GL" },
        new Countries() { Name = "Hong Kong", Code = "HK" },
        new Countries() { Name = "India", Code = "IN" },
        new Countries() { Name = "Italy", Code = "IT" },
        new Countries() { Name = "Japan", Code = "JP" },
        new Countries() { Name = "Mexico", Code = "MX" },
        new Countries() { Name = "Norway", Code = "NO" },
        new Countries() { Name = "Poland", Code = "PL" },
        new Countries() { Name = "Switzerland", Code = "CH" },
        new Countries() { Name = "United Kingdom", Code = "GB" },
        new Countries() { Name = "United States", Code = "US" },
    };
    public Query RemoteDataQuery = new Query().Select(new List<string> { "CustomerID" }).Take(6).RequiresCount();
    public class OrderDetails
    {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        public int? EmployeeID { get; set; }
        public double? Freight { get; set; }
        public string ShipCity { get; set; }
        public bool Verified { get; set; }
        public DateTime? OrderDate { get; set; }
        public string ShipName { get; set; }
        public string ShipCountry { get; set; }
        public DateTime? ShippedDate { get; set; }
        public string ShipAddress { get; set; }
    }
    
}

